<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <!-- 引入 jquery -->
  <script src="<%=request.getContextPath() %>/vendor/jquery.min.js"></script>
  <!-- 引入 echarts.js -->
  <script src="<%=request.getContextPath() %>/vendor/echarts.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">
 
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
        				title: {
        			        text: '堆叠区域图'
        			    },
        			    tooltip : {
        			        trigger: 'axis',
        			        axisPointer: {
        			            type: 'cross',
        			            label: {
        			                backgroundColor: '#6a7985'
        			            }
        			        }
        			    },
        			    legend: {
        			        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        			    },
        			    toolbox: {
        			        feature: {
        			            saveAsImage: {}
        			        }
        			    },
        			    grid: {
        			        left: '3%',
        			        right: '4%',
        			        bottom: '3%',
        			        containLabel: true
        			    },
        			    xAxis : [
        			        {
        			            type : 'category',
        			            boundaryGap : false,
        			            data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
        			        }
        			    ],
        			    yAxis : [
        			        {
        			            type : 'value'
        			        }
        			    ],
        			    series : [
        			        {
        			            name:'邮件营销',
        			            type:'line',
        			            stack: '总量',
        			            areaStyle: {},
        			            data:[120, 132, 101, 134, 90, 230, 210, 0, 0, 0, 0, 0]
        			           
        			        },
        			        {
        			            name:'联盟广告',
        			            type:'line',
        			            stack: '总量',
        			            areaStyle: {},
        			            data:[220, 182, 191, 234, 290, 330, 310, 100, 110, 110, 110, 110]
        			        },
        			        {
        			            name:'视频广告',
        			            type:'line',
        			            stack: '总量',
        			            areaStyle: {},
        			            data:[150, 232, 201, 154, 190, 330, 410, 20, 20, 20, 20, 20]
        			        },
        			        {
        			            name:'直接访问',
        			            type:'line',
        			            stack: '总量',
        			            areaStyle: {normal: {}},
        			            data:[320, 332, 301, 334, 390, 330, 320, 60, 60, 60, 60, 60]
        			        },
        			        {
        			            name:'搜索引擎',
        			            type:'line',
        			            stack: '总量',
        			            label: {
        			                normal: {
        			                    show: true,
        			                    position: 'top'
        			                }
        			            },
        			            areaStyle: {normal: {}},
        			            data:[820, 932, 901, 934, 1290, 1330, 1320, 1000, 1000, 1000, 1000, 1000]
        			        }
        			    ]
        		
        			};
      
        	var url = '<%=request.getContextPath()%>/consume/photoServlet?method=photo';
         	$.post(url,function(jsonData){
         		  			
	     		option.legend.data=jsonData[0];
	     		option.series=jsonData[1];
	     			
	     		myChart.hideLoading();  
	     		// 更新数据并显示图表。
	     		myChart.setOption(option);

         	},'json');

     	
    </script>


</body>
</html>